<template>
  <div class="container">
    <div class="app-container">
      <!-- 添加 -->
      <div v-if="addType" class="app-add-box">
        <div class="headtop">
          <div>创建考试</div>
          <div>
            <el-button type="primary" size="small" @click="addType = false">返回列表</el-button>
          </div>
        </div>
        <!-- 内容 -->
        <div class="box">
          <div class="content">
            <el-form ref="form" :model="form" label-width="180px" :rules="rules">
              <el-form-item label="考试名称" prop="exam_name">
                <el-input v-model="form.exam_name" />
              </el-form-item>
              <el-form-item label="考试类型">
                <el-radio
                  v-for="item in examCheckbox"
                  :key="item.id"
                  v-model="form.exam_type"
                  :label="item.id"
                >{{ item.name }}</el-radio>
              </el-form-item>
              <el-form-item label="锁屏方式">
                <el-radio
                  v-for="item in lockScreen"
                  :key="item.id"
                  v-model="form.lock_screen"
                  :label="item.id"
                >{{ item.name }}</el-radio>
              </el-form-item>
              <el-form-item label="归属学科" prop="subject_id">
                <el-select v-model="form.subject_id" placeholder="归属学科" @change="changeSubject">
                  <el-option
                    v-for="item in examData"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="归属目录" prop="directory_id">
                <el-select
                  v-model="form.directory_id"
                  placeholder="归属目录"
                  @change="changeCatalogue"
                >
                  <el-option
                    v-for="item in affiliationCatalogue"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="考试时长">
                <el-input-number v-model="form.exam_time" :min="1" :max="180" label="描述文字" />
              </el-form-item>
              <el-form-item label="试卷信息" prop="main_paper_id">
                <el-select
                  v-model="form.main_paper_id"
                  placeholder="选择主考试卷"
                  :disabled="mainPaperType"
                >
                  <el-option
                    v-for="item in testPaperMessage"
                    :key="item.id"
                    :label="item.paper_name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit">立即创建</el-button>
                <el-button>取消</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>

      <div v-else class="app-list-box">
        <el-row type="flex" class="row-bg" justify="end">
          <el-col :span="22" />
          <el-col :span="2">
            <el-button type="primary" size="small" @click="addType = true">创建考试</el-button>
          </el-col>
        </el-row>
        <!-- 搜索区域 -->
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="考试名称" size="mini">
            <el-input v-model="queryData.exam_name" placeholder="考试名称" />
          </el-form-item>
          <el-form-item label="学科名称" size="mini">
            <el-select
              v-model="queryData.subject_id"
              placeholder="归属学科"
              @change="subjectChange"
            >
              <el-option
                v-for="item in examData"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="考试类型" size="mini">
            <el-select
              v-model="queryData.directory_id"
              placeholder="归属目录"
              @change="catalogueChange"
            >
              <el-option
                v-for="item in catalogueData"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="考试类型" size="mini">
            <el-select v-model="queryData.exam_type" placeholder="请选择">
              <el-option
                v-for="item in examCheckbox"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-row>
            <el-col :span="20">
              <el-form-item label="锁屏方式" size="mini">
                <el-select v-model="queryData.lock_screen" placeholder="请选择">
                  <el-option
                    v-for="item in lockScreen"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="创建人" size="mini">
                <el-input v-model="queryData.create_name" placeholder="创建人" />
              </el-form-item>
              <el-form-item label="创建时间" size="mini">
                <el-date-picker
                  v-model="create_time"
                  value-format="timestamp"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item>
                <el-button type="primary" size="mini" @click="onSearch">查询</el-button>
                <el-button plain size="mini" @click="reset">重置</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <!-- 表格 -->
        <template>
          <el-table :data="tableData" stripe style="width: 100%" border>
            <el-table-column label="序号" type="index" width="80px" header-align="center" />
            <el-table-column label="考试信息" header-align="center">
              <template #default="{ row }">
                <div class="exam">
                  <span>考试ID:{{ row.id }}</span>
                  <span>考试名称:<b class="examColour">{{ row.exam_name }}</b>
                  </span>
                  <span>归属学科:{{ row.subject_name }}</span><span>归属目录:{{ row.directory_name }}</span>
                </div>
                <div class="examtow">
                  <div>考试类型:{{ row.exam_type === 1 ? '阶段考核' : '综合考试' }}</div>
                  <div>考试方式:{{ row.lock_screen === 1 ? '不锁屏' : '锁屏' }}</div>
                  <div>创建人:{{ row.create_name }}</div>
                  <div>创建时间:</div>
                  <div>
                    试卷信息:
                    <span
                      class="examine"
                      @click="questionClick(row.main_paper_name)"
                    >点击查看</span>
                  </div>
                  <div>
                    推送班级信息:
                    <span v-if="!row.exam_bind_class.length">暂无</span>
                    <span
                      v-else
                      class="examine"
                      @click="pushClick(row.exam_bind_class)"
                    >点击查看</span>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="操作" width="100px" header-align="center">
              <template #default="{ row }">
                <el-button
                  type="warning"
                  size="mini"
                  icon="el-icon-connection"
                  circle
                  @click="classAndGradeClick(row)"
                />
                <el-button
                  v-if="!row.exam_bind_class.length"
                  type="danger"
                  size="mini"
                  icon="el-icon-delete"
                  circle
                  @click="del(row.id)"
                />
              </template>
            </el-table-column>
          </el-table>
        </template>
        <!-- 分页器 -->
        <FormPage
          :search-value="queryData"
          :count="total"
          :on-search="initData"
          class="form-page"
        />
        <!-- 对话框 -->
        <Push :push-type="pushType" :push-data="pushData" />
        <Question :question-type="questionType" :main-name="mainName" />
        <ClassAndGrade ref="ClassAndGrade" :class-and-grade-type.sync="classAndGradeType" />
      </div>
    </div>
  </div>
</template>

<script>
import { getExamExam, getSubjectTree, getExamPaper, postExamExam, deleteExamExam } from '@/api/exam'
import Push from './components/push.vue'
import Question from './components/question.vue'
import ClassAndGrade from './components/classAndGrade.vue'
export default {
  name: 'Exam',
  components: {
    Push,
    Question,
    ClassAndGrade
  },
  data() {
    return {
      // 表格所需的数组
      tableData: [],
      examData: [],
      create_time: '',
      addType: false,
      // 模糊搜索的数据
      queryData: {
        exam_name: '',
        subject_id: '',
        directory_id: '',
        exam_type: '',
        lock_screen: '',
        create_name: '',
        create_time: '',
        page: 1,
        limit: 10
      },
      // 添加考试信息 的数据
      form: {
        directory_id: '',
        exam_name: '',
        exam_time: 30,
        exam_type: 1,
        lock_screen: 1,
        main_paper_id: '',
        subject_id: ''
      },
      // 试卷信息的请求所需数据
      formQueryData: {
        subject_id: '',
        directory_id: '',
        show_state: 1
      },
      // 考试类型
      examCheckbox: [
        { name: '阶段考核', id: 1 },
        { name: '综合考试', id: 2 }
      ],
      // 锁屏方式
      lockScreen: [
        { name: '不锁屏', id: 1 },
        { name: '锁屏', id: 2 }
      ],
      total: 1,
      catalogueData: [], // search  归属目录数组
      testPaperMessage: [], // form  试卷信息数组
      affiliationCatalogue: [], // form  归属目录数组
      questionType: false,
      classAndGradeType: false,
      pushType: false,
      mainPaperType: true, // 试卷信息是否禁用的控制变量
      pushData: [],
      // 效验规则
      rules: {
        exam_name: [{ required: true, message: '请输入考试名称', trigger: 'blur' }],
        directory_id: [{ required: true, message: '请输入归属目录', trigger: ['blur', 'change'] }],
        subject_id: [{ required: true, message: '请输入归属学科', trigger: ['blur', 'change'] }],
        main_paper_id: [{ required: true, message: '请输人试卷信息', trigger: ['blur', 'change'] }]
      },
      mainName: ''
    }
  },
  created() {
    this.initData()
    this.getexamData()
  },
  methods: {
    async initData() {
      const res = await getExamExam(this.queryData)
      this.total = res.total
      this.tableData = res.list
    },
    async getexamData() {
      const res = await getSubjectTree()
      this.examData = res
    },
    questionClick(main_paper_name) {
      // console.log('🚀 ~ row:', main_paper_name)
      this.mainName = main_paper_name
      this.questionType = true
    },
    pushClick(exam_bind_class) {
      // console.log('🚀 ~ exam_bind_class:', exam_bind_class)
      if (exam_bind_class.length) this.pushData = exam_bind_class
      this.pushType = true
    },

    classAndGradeClick(row) {
      console.log('🚀 ~ row:', row)
      this.$refs.ClassAndGrade.form.exam_id = row.id
      this.$refs.ClassAndGrade.form.main_paper_id = row.main_paper_id
      this.classAndGradeType = true
    },
    // search 学科名称 的选项change事件
    subjectChange(event) {
      const children = this.examData.find(item => item.id === event)
      console.log('🚀 ~ children:', children)
      // this.$set(this.catalogueData, 'name', null)
      // this.$refs.list.clear()
      this.catalogueData = children.children
      this.queryData.directory_id = ''
      // console.log('🚀 ~ children.children:', children.children)
    },
    // search 考试类型 的选项change事件
    catalogueChange(event) {
      console.log('🚀 ~ event:', event)
    },
    // from 归属学科 的选项change事件
    changeSubject(event) {
      const children = this.examData.find(item => item.id === event)
      // this.$set(this.catalogueData, 'name', null)
      // this.$refs.list.clear()
      this.formQueryData.subject_id = event
      this.affiliationCatalogue = children.children
      this.form.directory_id = ''
      this.form.main_paper_id = ''
    },
    // form 归属目录 的选项change事件
    async changeCatalogue(event) {
      const children = this.affiliationCatalogue.find(item => item.id === event)
      this.formQueryData.directory_id = children.id
      const res = await getExamPaper(this.formQueryData)
      this.testPaperMessage = res.list
      this.form.main_paper_id = ''
      this.mainPaperType = false
    },
    // 搜索
    onSearch() {
      if (this.create_time) {
        this.queryData.create_time = this.create_time.join()
      }
      this.initData()
    },
    // 兜底效验表单提交
    async onSubmit() {
      await this.$refs.form.validate()
      const res = await postExamExam(this.form)
      console.log(res)
      // 提示
      this.$message.success('添加成功！')
      // 刷新表单
      this.initData()
    },
    del(id) {
      this.$confirm('你确定要删除?', '提示', {
        type: 'warning'
      }).then(async() => {
        const res = await deleteExamExam(id)
        if (this.tableData.length === 1 && this.queryData.page > 1) {
          this.queryData.page--
        }
        this.$message.success('删除成功!')
        // 刷新页面
        this.initData()
        console.log('🚀 ~ res:', res)
      }).catch(() => {
        this.$message('已取消删除')
      })
    },
    reset() {
      this.queryData = {
        exam_name: '',
        subject_id: '',
        directory_id: '',
        exam_type: '',
        lock_screen: '',
        create_name: '',
        create_time: '',
        page: 1,
        limit: 10
      }
      this.catalogueData = []
      this.create_time = ''
      this.initData()
    }
  }
}
</script>

<style scoped lang="scss">
.exam {
  font-size: 12px;
  .examColour {
    color: #409eff;
    font-weight: 400;
  }
  span {
    padding: 0 10px;
  }
}
.examine {
  display: inline-block;
  height: 20px;
  width: 60px;
  text-align: center;
  line-height: 20px;
  font-size: 12px;
  border-radius: 5px;
  color: #409eff;
  background-color: #ecf5ff;
  cursor: pointer;
}
.examtow {
  display: flex;
  font-size: 12px;
  div {
    padding: 0 10px;
  }
}

.headtop {
  display: flex;
  justify-content: space-between;
  font-weight: 700;
  align-items: center;
  padding-bottom: 5px;
  border-block-end: 2px solid #ebeef5;
}
.box {
  padding-top: 25px;

  .content {
    padding: 0 300px;
  }
}
.form-page {
  display: flex;
  justify-content: end;
  padding: 15px;
}
</style>
